import * as echarts from 'echarts'

export default {
  name: 'Home',
  components: {
    // OrderDetail
  },
  data() {
    return {
      // 今日数据
      todayData: {
        orderCount: 0,
        orderIncrease: 0,
        revenue: 0,
        revenueIncrease: 0
      },
      // 本月数据
      monthData: {
        orderCount: 0,
        orderIncrease: 0,
        revenue: 0,
        revenueIncrease: 0
      },
      // 图表相关
      revenueChartType: 'week',
      revenueChart: null,
      productChart: null,
      // 待处理订单
      pendingOrders: [],
      // 库存预警
      stockWarnings: [],
      // 订单详情
      detailVisible: false,
      currentOrderId: ''
    }
  },
  mounted() {
    this.initData()
    this.initCharts()
    // 监听窗口大小变化，重绘图表
    window.addEventListener('resize', this.resizeCharts)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resizeCharts)
    this.revenueChart && this.revenueChart.dispose()
    this.productChart && this.productChart.dispose()
  },
  methods: {
    // 初始化数据
    async initData() {
      try {
        // 这里调用相关接口获取数据
        // 模拟数据
        this.todayData = {
          orderCount: 15,
          orderIncrease: 20,
          revenue: 25800,
          revenueIncrease: -5
        }
        this.monthData = {
          orderCount: 386,
          orderIncrease: 15,
          revenue: 658000,
          revenueIncrease: 10
        }
        this.pendingOrders = [
          {
            orderNo: 'DD20240101001',
            customerName: '张三',
            amount: 3999,
            createTime: '2024-01-01 12:00:00'
          }
          // ... 更多数据
        ]
        this.stockWarnings = [
          {
            name: '豪华骨灰盒',
            category: '寿盒',
            stock: 5,
            warningStock: 10
          }
          // ... 更多数据
        ]
      } catch (error) {
        this.$message.error('获取数据失败')
      }
    },

    // 初始化图表
    initCharts() {
      // 初始化营收趋势图
      this.revenueChart = echarts.init(this.$refs.revenueChart)
      this.updateRevenueChart()

      // 初始化商品占比图
      this.productChart = echarts.init(this.$refs.productChart)
      this.updateProductChart()
    },

    // 更新营收趋势图
    updateRevenueChart() {
      // 模拟数据
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '营收',
            type: 'line',
            smooth: true,
            data: [3200, 4500, 5800, 3800, 6000, 4200, 5500],
            areaStyle: {
              opacity: 0.1
            },
            itemStyle: {
              color: '#409EFF'
            }
          }
        ]
      }
      this.revenueChart.setOption(option)
    },

    // 更新商品占比图
    updateProductChart() {
      // 模拟数据
      const option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '销量占比',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 35, name: '寿盒' },
              { value: 30, name: '寿衣' },
              { value: 20, name: '花圈' },
              { value: 15, name: '其他' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      this.productChart.setOption(option)
    },

    // 重绘图表
    resizeCharts() {
      this.revenueChart && this.revenueChart.resize()
      this.productChart && this.productChart.resize()
    },

    // 查看更多
    handleViewMore(type) {
      const routeMap = {
        order: '/order',
        stock: '/stock'
      }
      this.$router.push(routeMap[type])
    },

    // 查看订单详情
    handleViewOrder(order) {
      this.currentOrderId = order.orderNo
      this.detailVisible = true
    }
  },
  watch: {
    revenueChartType() {
      this.updateRevenueChart()
    }
  }
}